<!-- 顶部背景图片部分 -->
<template>
  <div id="bg-container" :style="{height: height}" >
    <div
      class="bg-img"
      :style="{
        backgroundImage: `url(${culture})`
      }"
    ></div>
    <div class="title">
      <div class="bar"></div>
      <h1>{{title}}</h1>
    </div>
  </div>
</template>

<script>
import culture from "../../../assets/img/culture.jpg"
export default {
  name: 'Index',
  data(){
    return {
      culture
    }
  },
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: 'About Us'
    },
    height: {
      type: String,
      default: '500px'
    }
  }
}
</script>

<style scoped lang="less">
  #bg-container{
    position: relative;
    width: 100%;
    .bg-img{
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    .title{
      position: absolute;
      left: 20%;
      top: 50%;
      margin-top: -40px;
      .bar{
        background: #27bec9;
        height: 8px;
        width: 300px;
	      animation: myline 1s;
	      -webkit-animation: myline 1s; /* Safari and Chrome */
      }
      h1{
        font-size: 60px;
        font-family: Arial;
        color: #fff;
        text-transform: uppercase;
        margin-top: 15px;
        font-weight: bold;
      }
    }
  }
  @keyframes myline
{
	from {width: 0px;}
	to {width: 300px;}
}
</style>